<template>
  <view class="container">
    <unicloud-db ref="udb" v-slot:default="{data, loading, error, options}" :options="options" collection="indexLists,uni-id-users" field="files,title,user_id.nickname,content" :where="queryWhere" :getone="true" :manual="true">
      <view v-if="error">{{error.message}}</view>
      <view v-else-if="loading">
        <uni-load-more :contentText="loadMore" status="loading"></uni-load-more>
      </view>
      <view v-else-if="data">
        <view>
		  <uni-section title="作品展示" style="margin: 0;" type="line"></uni-section>
          <template v-for="(file, j) in data.files" >
			<video  v-if="file.extname == 'mp4'" :src="file.url" show-fullscreen-btn="true" object-fit="contain"></video>
			<wxy-audio  v-if="file.extname == 'mp3'||file.extname == 'amr'||file.extname == 'm4a'||file.extname == '3pg'||file.extname == 'mar'||file.extname == 'wma'||file.extname == 'ma4'" :src="file.url" :play.sync="audioPlay" msshow name="音频播放" author="未知"></wxy-audio>
          </template>
        </view>
        <view>
			<uni-section title="作品标题" style="margin: 0;" type="line">{{data.title}}</uni-section>
        </view>
		<view>
		  <uni-section style="margin:0;" title="作品内容" type="line"></uni-section>
		  <uni-section style="margin:0;" :subTitle="data.content" type="circle"></uni-section>
		</view>
		<view>
			<uni-section title="作者" style="margin: 0;" type="line">{{data.user_id[0].nickname}}</uni-section>
		</view>
      </view>
    </unicloud-db>
    <view class="btns">
      <!-- <button type="primary" @click="handleUpdate">修改</button>
      <button type="warn" class="btn-delete" @click="handleDelete">删除</button> -->
    </view>
  </view>
</template>

<script>
  // 由schema2code生成，包含校验规则和enum静态数据
  import { enumConverter } from '../../store/validator/indexLists.js';
  const db = uniCloud.database();

  export default {
    data() {
      return {
		audioPlay: true,
        queryWhere: '',
        loadMore: {
          contentdown: '',
          contentrefresh: '',
          contentnomore: ''
        },
        options: {
          // 将scheme enum 属性静态数据中的value转成text
          ...enumConverter
        },
		status:false
      }
    },
    onLoad(e) {
      this._id = e.id
	  
    },
    onReady() {
      if (this._id) {
        this.queryWhere = '_id=="' + this._id + '"'
		this.status=true
      }
	  // #ifdef MP-WEIXIN
	  //分享  
	  uni.showShareMenu({  
	      withShareTicket: true  
	  });
	  // #endif
    },
	 watch: {
	        status: function() {
	            this.$nextTick(() => { 
					db.collection("indexLists,uni-id-users")
					.where({_id:this._id})
					.field("content,title,user_id.nickname,index_order")
					.get({getOne:true}).then(res=>{
						let data=res.result.data
						let title=data.title+"——"+data.user_id[0].nickname
						let desc
						if(!data.content){
							desc="我是"+data.index_order+"号作品\n请多支持我哦~"
						}else{
							desc="我是"+data.index_order+"号作品——"+data.content+"\n请多支持我哦~"
						}
						this.initShare(title,desc)
					})
					
	            });
	        }
	    },
    methods: {
		initShare(title,desc){
			if (this.$jwx) {
							// uni.showToast({
							// 	title:'微信环境'
							// })
							this.$jwx.initJssdk({shareTitle:title,shareDesc:desc}),function(r){
								console.log(r)
							}
						}
			},
      handleUpdate() {
        // 打开修改页面
        uni.navigateTo({
          url: './edit?id=' + this._id,
          events: {
            // 监听修改页面成功修改数据后, 刷新当前页面数据
            refreshData: () => {
              this.$refs.udb.loadData({
                clear: true
              })
            }
          }
        })
      },
      handleDelete() {
        this.$refs.udb.remove(this._id, {
          success: (res) => {
            // 删除数据成功后跳转到list页面
            uni.navigateTo({
              url: './list'
            })
          }
        })
      }
    }
  }
</script>

<style>
  .container {
    padding: 10px;
	margin: 1rem;
/* 	background-color: hsl(0, 0%, 90%);
	border-radius: 20rpx; */
  }

  .btns {
    margin-top: 10px;
    /* #ifndef APP-NVUE */
    display: flex;
    /* #endif */
    flex-direction: row;
  }

  .btns button {
    flex: 1;
  }

  .btn-delete {
    margin-left: 10px;
  }
</style>
